var informacionProductos = [];
var imagenSubida;
var archivoImagen = null;
var dropzone;

$(document).ready(function(){

	// Oyentes de algunos de los botones de la pantalla
	$('#boton_nuevo_producto').click(onClickBoton_nuevo_producto);
	$('#boton_otro_nuevo_producto').click(onClickBoton_nuevo_producto);
	$('#boton_finalizar_nuevo_producto').click(onClickBoton_finalizar_nuevo_producto);
	$('#icono_cancelar_nuevo_producto').click(onClickBoton_cancelar_nuevo_producto);
	$("#subida_imagen").hide();
	$('#modal_imagen_factura_informes_ventas .modal-body').empty();

	window.PixelAdmin.start(init);

	$('#wizard-forms .wizard-prev-step-btn').on('click', function () {
		$('#wizard-forms').pixelWizard('prevStep');
		return false;
	});

	// PASO 1: DETALLES
	$("#wizard-detalles").validate({
		ignore: '.ignore',
		focusInvalid: true,
		rules: {
			'descripcion': {
				required: true,
				minlength: 1
			},
			'precio': {
				required: true,
				number: true,
				min: 0
			},
			'iva': {
				number: true,
				min: 0,
				max: 100
			},
			'descuento': {
				number: true,
				min: 0,
				max: 100
			},
		},
		messages: {
			'descripcion': {
				required: 'Debe introducir una descripción del producto'
			},
			'precio' : {
				required: 'Debe asignarle un precio al producto',
				number: 'Introduzca un número válido'
			},
			'iva' : {
				number: 'Introduzca un número válido',
				min: 'Introduzca un número comprendido entre 0 y 100',
				max: 'Introduzca un número comprendido entre 0 y 100'
			},
			'descuento' : {
				number: 'Introduzca un número válido',
				min: 'Introduzca un número comprendido entre 0 y 100',
				max: 'Introduzca un número comprendido entre 0 y 100'
			}
		}
	});
	
	$('#wizard-detalles').on('submit', function () {
		if ($(this).valid()) {
			$("#subida_imagen").show();
			$('#wizard-forms').pixelWizard('nextStep');
		}
		return false;
	});

	// PASO 2: IMÁGEN
	$('#wizard-imagen').on('submit', function () {
		$('#wizard-forms').pixelWizard('nextStep');

		// Preparamos el resumen del producto con lo que haya introducido el usuario por consola
		$("input[name='descripcionResumen']").val($("input[name='descripcion']").val());
		$("input[name='precioResumen']").val($("input[name='precio']").val());
		$("input[name='ivaResumen']").val($("input[name='iva']").val());
		$("input[name='descuentoResumen']").val($("input[name='descuento']").val());
		$("input[name='estadoResumen']").val($('input[name=tipoEstado]:checked', '#wizard-detalles').val());

		$('#imagen_producto_subida').empty();			
		// Vemos si se ha subido imagen
		if(imagenSubida != null){
			// Colocamos la imagen que acabamos de subir
			$('#imagen_producto_subida').append(imagenSubida);
		}else{
			// Colocamos la imagen por defecto
			$('#imagen_producto_subida').append('<img src="assets/images/miImg/no_imagen.png" alt="Imagen no disponible" style="width: 300px;">');
		}

		// Enviamos el nuevo producto al servidor para que sea añadido
		registrarNuevoProductoEnServidor();

		return false;
	});

/****************************************** SUBIDA DE IMÁGENES *************************************/
	$("#dropzonejs-example").dropzone({
		url: "../php/upload.php",
		method:'post',
		paramName: "file", // The name that will be used to transfer the file
		maxFilesize: 1, // MB

		init: function () {
			// Metodo encargado de realizar las acciones pertinentes cuando se añade la imagen del producto
	        this.on('addedfile', function(file){
	        	archivoImagen = file;
	        	imagenSubida = file.previewElement.querySelectorAll("[data-dz-thumbnail]")[0];

				// Creamos el botón eliminar
       			var botonEliminar = Dropzone.createElement('<button class="btn btn-danger btn-flat" style="width: 100%">Eliminar</button>');
		        // Creamos la instancia del dropzone
		        dropzone = this;

		        // Listen to the click event
		        botonEliminar.addEventListener("click", function(e) {
		        	// Evitamos que se haga el submit
		        	e.preventDefault();
		          	e.stopPropagation();

		          	// Eliminamos la imagen
		          	dropzone.removeFile(file);

		          	archivoImagen = null;
		        });

		        // Añadimos el botón para que se visualice
		        file.previewElement.appendChild(botonEliminar);
		    });
	    },

		addRemoveLinks : false,
		dictResponseError: "Can't upload file!",
		autoProcessQueue: false,
		thumbnailWidth: 500,
		thumbnailHeight: 310,

		previewTemplate: '<div class="panel" style="margin-right: -15px; margin-bottom:-15px"><br><div align="center">Vista previa de la imágen</div><div class="tl-wide text-center" style="padding: 10px;margin-top:15px;margin-bottom: 15px;background: #f1f1f1"><img data-dz-thumbnail style="width: 50%"></div></div>',

		resize: function(file) {
			var info = { srcX: 0, srcY: 0, srcWidth: file.width, srcHeight: file.height },
				srcRatio = file.width / file.height;
			if (file.height > this.options.thumbnailHeight || file.width > this.options.thumbnailWidth) {
				info.trgHeight = this.options.thumbnailHeight;
				info.trgWidth = info.trgHeight * srcRatio;
				if (info.trgWidth > this.options.thumbnailWidth) {
					info.trgWidth = this.options.thumbnailWidth;
					info.trgHeight = info.trgWidth / srcRatio;
				}
			} else {
				info.trgHeight = file.height;
				info.trgWidth = file.width;
			}
			return info;
		}
	});
				
/****************************************** TABLA PRODUCTOS *************************************/
	
	$('#contenedor_tabla_productos').jtable({
		title: 'Productos',
		paging: true, //Enable paging
        pageSize: 20, //Set page size (default: 10)
        sorting: true, //Enable sorting
        multiSorting: true,
        defaultSorting: 'idProducto ASC', //Set default sorting
		actions: {
				listAction: function (postData, jtParams) {
                    return $.Deferred(function ($dfd) {
                        $.ajax({
                        	url: '../php/productos/operacionesTablaProductos.php',
	                        type: 'POST',
	                        dataType: 'json',
	                        data: crearPeticionJsonTablaProductos(jtParams.jtStartIndex, jtParams.jtPageSize, jtParams.jtSorting),
                            success: function (data) {
                                $dfd.resolve(data);
                                añadirProductos(data.Records);
                            },
                            error: function (data) {
                            	console.log(data);
                                $dfd.reject();
                            }
                        });
                    });
                },
                deleteAction: function (postData) {
                    console.log("deleting from custom function...");
                    return $.Deferred(function ($dfd) {
                        $.ajax({
                            url: 'PersonActions',
                            type: 'POST',
                            dataType: 'json',
                            data: postData,
                            success: function (data) {
                                $dfd.resolve(data);
                            },
                            error: function () {
                                $dfd.reject();
                            }
                        });
                    });
                },
                updateAction: function(postData) {
                    console.log("updating from custom function...");
                    return $.Deferred(function ($dfd) {
                        $.ajax({
                            url: '../php/productos/operacionesTablaProductos.php',
	                        type: 'POST',
	                        dataType: 'json',
	                        data: crearPeticionJsonActualizarProductos(postData),
                            success: function (data) {
                                $dfd.resolve(data);
                            },
                            error: function (data) {
                                $dfd.reject();
                                console.log(data)
                            }
                        });
                    });
                }
		},
		fields: {
			idComercio: {
				create: false,
				edit: false,
				list: false,
			},
			imagen: {
				title: 'Imágen',
				width: '15%',
				sorting: false,
				display: function (data) {
					// Vemos si tiene imagen o no
					if(data.record.imagen == 'No imagen'){
						// Mostramos una imagen por defecto
						return '<img src="assets/images/miImg/no_imagen.png" alt="Imagen no disponible" style="width: 150px;">';
					}else{
						// Mostramos la imagen del producto
						return '<img  src="data:image/png;base64,' + data.record.imagen + '"width="150px"; height="100px;"/>';
					}			
			    }
			},
			idProducto: {
				key: true,
				title: 'Identificador',
				width: '10%',
				listClass: 'campoCentrado',
				display: function (data) {
					// Le añadimos la cadena 'id_' por cuestión de estética
					return 'id_' + data.record.idProducto;
			    }
			},
			descripcion: {
				title: 'Descripción',
				width: '40%',
				sorting: false,
			},
			precio: {
				title: 'Precio',
				width: '10%',
				listClass: 'campoCentrado',
				sorting: false,
				display: function (data) {
					return data.record.precio + " €";
			    }
			},
			iva: {
				title: 'IVA',
				width: '10%',
				listClass: 'campoCentrado',
				sorting: false,
				display: function (data) {
					return data.record.iva + " €";
			    }
			},
			descuento: {
				title: 'Descuento',
				width: '10%',
				listClass: 'campoCentrado',
				sorting: false,
				display: function (data) {
					return data.record.descuento + " €";
			    }
			},
			estado: {
				title: 'Estado',
				width: '5%',
				display: function (data) {
					// Vemos si está activo o inactivo para elegir el color de la etiqueta
					if (data.record.estado == "Activo") {
						var $estado = $('<div align="center" id="' + data.record.idProducto + '"<a href="#" class="label label-success">&nbsp;' + data.record.estado + '&nbsp;</a></div>');
						$estado.click(onClickCambiarEstadoProducto);
						return $estado;
					}else{
						var $estado = $('<div align="center" id="' + data.record.idProducto + '"<a href="#" class="label label-danger">' + data.record.estado + '</a></div>');
						$estado.click(onClickCambiarEstadoProducto);
						return $estado;
					}
			    }
			},
			editar:{
				title: '',
				width: '5%',
				sorting: false,
				display: function (data) {
					var $editar = $('<div align="center" class="botonesEditaEliminar" id="' + data.record.idProducto + '"><i class="fa fa-edit text-default text-lg"></i></div>');
					$editar.click(onClickEditarProducto);
					return $editar;
			    }
			},
			eliminar:{
				title: '',
				width: '5%',
				sorting: false,
				display: function (data) {
					var $eliminar = $('<div align="center" class="botonesEditaEliminar" id="' + data.record.idProducto + '"><i class="fa fa-trash-o text-default text-lg"></div>');
			    	$eliminar.click(onClickEliminarProducto);
					return $eliminar;
			    }
			}
		}
	});

	// Cargamos la tabla desde el servidor
	$('#contenedor_tabla_productos').jtable('load');
});

// Método encargado de añadir productos al array de productos para poder trabajar posteriormente con ellos
function añadirProductos(productos){
	for (var i=0; i<productos.length; i=i+1){
		producto = [];
		producto.idProducto = productos[i].idProducto;
		producto.producto = productos[i];
 		informacionProductos.push(producto); 
	}
}

// Método encargado de realizar el post correspondiente para listar los productos en la tabla
function crearPeticionJsonTablaProductos(inicio, tamPagina, ordenacion){
    informacionJson = {};
    datosPeticionProductos = {};
    datosPeticionProductos.accion = 'listarProductos';
    datosPeticionProductos.tipoFormulario = 'tabla_productos';
    datosPeticionProductos.tokenCSRF = $('#ver_productos_tabla_token_CSRF').val();
	datosPeticionProductos.inicio = inicio; 
	datosPeticionProductos.tamPagina = tamPagina; 
    datosPeticionProductos.ordenacion = ordenacion;     
    informacionJson.datosPostVerProductos = datosPeticionProductos;
    informacionJson.peticionAjax = 'SI';
    return informacionJson;
}

// Método encargado de realizar el post correspondiente para actualziar los productos en la tabla
function crearPeticionJsonActualizarProductos(datosActualizar){
    informacionJson = {};
    datosPeticionProductos = {};
    datosPeticionProductos.accion = 'actualizarProductos';
    datosPeticionProductos.tipoFormulario = 'tabla_productos';
    datosPeticionProductos.tokenCSRF = $('#ver_productos_tabla_token_CSRF').val();  
    datosPeticionProductos.datosActualizar = datosActualizar;
    informacionJson.datosPostVerProductos = datosPeticionProductos;
    informacionJson.peticionAjax = 'SI';

    return informacionJson;
}

// Método encargado de realizar el post para cambiar el estado de un producto
function onClickCambiarEstadoProducto(){
    // Obtenemos el idComercio y el idProducto del label del atributo id
    idProducto = $(this).attr('id');

    datosProductoActualizar = {};
    record = {};
    record.actualizarEstado = 'Si';
    record.idProducto = idProducto;
    record.estado = cambiaEstadoProductoDadoIdProducto(idProducto);
    datosProductoActualizar.record = record;

    // Enviamos la petición al servidor
    $('#contenedor_tabla_productos').jtable('updateRecord', datosProductoActualizar);
}

// Método encargado de realizar el post para registrar un nuevo producto en el servidor
function registrarNuevoProductoEnServidor(){
    $.ajax({
        url: '../php/productos/operacionesTablaProductos.php',
        type: 'POST',
        dataType: 'json',
        data: crearPeticionJsonRegistraNuevoProducto(),
        success: function (data) {
        	console.log(data);
        	// Recargamos la tabla
    		$('#contenedor_tabla_productos').jtable('load');
    		// Mostramos al usuario en el resumen el id de producto que se le ha asignado al nuevo producto
    		$("input[name='idProductoResumen']").val('id_' + data.idProducto);

			// Inicializamos la imagen
			imagenSubida = null;
        },
        error: function (data) {
            console.log(data);

            // Inicializamos la imagen
			imagenSubida = null;
        }
    });
}

// Método encargado de realizar el json correspondiente para registrar un nuevo producto en el servidor
function crearPeticionJsonRegistraNuevoProducto(){
    informacionJson = {};
    datosPeticionProductos = {};
    datosPeticionProductos.accion = 'registrarNuevoProducto';
    datosPeticionProductos.tipoFormulario = 'tabla_productos';
    datosPeticionProductos.tokenCSRF = $('#ver_productos_tabla_token_CSRF').val();

    // Datos del nuevo producto
    if(imagenSubida != null){
    	datosPeticionProductos.imagen = imagenSubida.src;
    }else{
    	datosPeticionProductos.imagen = 'No imagen';
    }
    datosPeticionProductos.descripcion = $("input[name='descripcion']").val();
    datosPeticionProductos.precio = $("input[name='precio']").val();
    datosPeticionProductos.iva = $("input[name='iva']").val();
    datosPeticionProductos.descuento = $("input[name='descuento']").val();
    datosPeticionProductos.estado = $('input[name=tipoEstado]:checked', '#wizard-detalles').val();

    informacionJson.datosPostVerProductos = datosPeticionProductos;
    informacionJson.peticionAjax = 'SI';

    return informacionJson;
}

// Método encargado de realizar el post para editar un producto
function onClickEditarProducto(){
    // Obtenemos el idComercio y el idProducto del label del atributo id
    idProducto = $(this).attr('id');

    $.growl.error({ title:"Funcionalidad no disponible", message: "Esta funcionalidad no está disponible para la versión beta." });
}

// Método encargado de eliminar un producto
function onClickEliminarProducto(){
   	// Obtenemos el idCabecera del name del icono
	$idProducto = $(this).attr('id');
    // Enviamos Post al Servidor
    enviarPeticionEliminarProducto($idProducto);
}

function enviarPeticionEliminarProducto(idProducto){
    datosEnvioPeticionEliminarProducto = {};
    datosEnvioPeticionEliminarProducto.accion = 'eliminarProducto';
    datosEnvioPeticionEliminarProducto.tipoFormulario = 'tabla_productos';
    datosEnvioPeticionEliminarProducto.tokenCSRF = $('#ver_productos_tabla_token_CSRF').val();
    datosEnvioPeticionEliminarProducto.idProducto = idProducto;
    // JSON.stringfy(obj) transforma un objeto a una cadena de texto
    // JSON.parse(cadena) transforma una cadena en un objeto
    // Realizamos la peticion POST con el JSON de parametro
    $.post("../php/productos/operacionesTablaProductos.php", {datosPostVerProductos: JSON.stringify(datosEnvioPeticionEliminarProducto)}, callbackPeticionEliminarProductoExito).fail(failPostPeticionEliminarProducto);
}

function callbackPeticionEliminarProductoExito(data){
	// Actualizamos la tabla para que se vea reflejado
	$('#contenedor_tabla_productos').jtable('reload');
	// Notificamos al usuario de que se ha eliminado el producto con éxito
	$.growl.notice({ title:"Producto eliminado", message: "El producto ha sido eliminado de forma permanente." });
	console.log(data);
}

function failPostPeticionEliminarProducto(data){
	console.log(data);
}

/****************************************** ON CLICK BOTONES *************************************/

function onClickBoton_nuevo_producto() {
	event.preventDefault();
	reiniciar_campos_nuevo_producto();
	$("#formulario_nuevo_producto").show();
	$('#wizard-forms').pixelWizard('setCurrentStep', 1);
}

function reiniciar_campos_nuevo_producto() {
	$("input[name='descripcion']").val($("input[name='descripcion']").attr('defaultValue'));
	$("input[name='precio']").val($("input[name='precio']").attr('defaultValue'));
	$("input[name='ivaResumen']").val("21.0");
	$("input[name='descuentoResumen']").val("0.0");
	$("#radioActivo").prop("checked", true)
	if(archivoImagen != null && dropzone != null){
		dropzone.removeFile(archivoImagen);
		archivoImagen = null;
	}
}

function onClickBoton_finalizar_nuevo_producto() {
	event.preventDefault();
	$("#formulario_nuevo_producto").hide();
	$('#wizard-forms').pixelWizard('setCurrentStep', 1);
}

function onClickBoton_cancelar_nuevo_producto() {
	event.preventDefault();
	reiniciar_campos_nuevo_producto();
	$("#formulario_nuevo_producto").hide();
	$('#wizard-forms').pixelWizard('setCurrentStep', 1);
}

/************************************* FUNCIONES ARRAY PRODUCTOS *************************************/

function cambiaEstadoProductoDadoIdProducto(idProducto){
	i = 0;
	encontrado = false;
	while (i<informacionProductos.length && encontrado == false){
		// Vemos si es el producto que buscamos
		if(informacionProductos[i].idProducto === idProducto){
			encontrado = true;
			// Vemos su estado y lo invertimos
			if(informacionProductos[i].producto.estado == 'Activo'){
				informacionProductos[i].producto.estado = "Inactivo";
				console.log(idProducto + ", " + informacionProductos[i].producto.estado);
				return 'Inactivo';
			}else if(informacionProductos[i].producto.estado == 'Inactivo'){
				informacionProductos[i].producto.estado = "Activo";
				console.log(idProducto + ", " + informacionProductos[i].producto.estado);
				return 'Activo';
			}
		}else{
			i++;
		}
	}
}




